【JavaScript】DOM之样式操作

头像
佐珥玎
    阅读 7 分钟
    1

    样式操作

    获取内联样式

    以节点和元素的方法来获取指定的CSS样式

    <body>
<div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
    var div = document.getElementById('q1');
//    节点属性获取指定元素的属性
    var attrNode = div.getAttributeNode('style');
    var style = attrNode.nodeValue;
    console.log(style);

    var div = document.getElementById('q1');
//    元素属性获取指定的元素的属性
    var style = div.getElementById('style');
    console.log(style);


    var div = document.getElementById('q1');
    var style = div.style;
    console.log(style.width);
</script>
</body>

    CSSStyleDeclaration对象

    以getPropertyVslue()方法通过elementstylestyleitem.getPropertyVslue()获取CSS样式属性值
    该属性还具有length属性

    <body>
<div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
    var div = document.getElementById('q1');
    var style = div.style;
//    得到CSSStyleDeclaration对象
    console.log(style.cssText);
//    cssText属性；获取当前元素中所有的样式属性内容(字符串类型)
    console.log(style.length);
//    length属性；获取当前元素中样式属性的个数(不等于与设置的个数一致)
    var attrName = (style.item);
    console.log(attrName);
    console.log(style.getPropertyCSSValue(attrName));
//    getPropertyCSSValue(Name)；获取当前元素中指定属性名对应的样式属性值

    for (var attr in style) {
        console.log(attr);//遍历该对象
    }
</script>
</body>

    获取外联样式表

    以styleSheets属性，该属性返回所有包含外联样式表返回包括内嵌样式表合外联样式表的集合

    <head>
    <meta charset="UTF-8">
    <title>获取外联样式</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .q1{
           width:200px;
           height: 200px;
           background-color: blue;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<script>
    var stylSheetList = document.styleSheets;
//    获取当前所有页面的样式表
//    并返回StyleSheetList对象(类数组对象)
    console.log(document.styleSheets);
    var styleSheet = styleSheetList[0];
/*
* type属性 - 表示当前使用的是CSS样式
  href属性 - 表示当前样式表的路径
  cssRules/rules属性 - 表示当前样式表中所有的样式规则
 */
    console.log(styleSheet);

    var cssRuleList = styleSheet.rules;
    console.log(cssRuleList);
//     表示当前样式表中的所有规则集合(类数组对象)

    var styleDecl = cssStyleRule.style;
    console.log(styleDecl);
</script>
</body>

    获取class属性

    以className属性来获取页面中元素的class属性值，Element对象该属性不是个class属性值可获取页面中元素的class属性值的列表

    以classList属性来获取页面中元素的class属性值，在页面中元素的class属性值为多个样式，该属性可获取页面中元素的class属性值的列表

       <style>
        .q1 {
           width:200px;
           height: 200px;
           background-color: blue;
        }
        .q2 {
           font-family: 新宋体;
           color: darkgray;
        }
        .two {
           width: 200px;
           height: 200px;
           background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1" class="q1 q2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem delectus dolores enim ex iusto non optio quibusdam! A animi minima nisi repudiandae rerum voluptas! At cumque iste nulla quasi.</div>
<script>
    var div = document.getElementById('q1');
    var className = div.className;
//    DOM中的对象的className属性并得到class属性值
    console.log(className);
    // div.className = 'two';
    var attr = div.getAttribute('class');
    console.log(attr);
    // div.setAttribute('class','two');
    var classList = div.classList;
//    classList属性(浏览器兼容问题)
    console.log(classList);
</script>
</body>

    获取当前有效样式

    以Window对象表示在getComputedStyle()方法来获取元素当前有效样式，并带有浏览器的兼容问题

      <style>
        .q1 {
            color: blue;
            font-family: 新宋体;
        }
    </style>
</head>
<body>
<div id="q1" style="width: 200px;height: 200px;background-color: red;" class="q1">火影忍者</div>
<script>
    var div = document.getElementById('q1');
    var style = div.currentStyle;
    console.log(style);
//    在window对象的getComputedStyle(element)
//    element是指定元素
//    * 返回值为CSSStyleDeclaration对象
//    * 此方法仅用于获取，不能用于设置
    function getStyle(element) {
        if(element.getComputedStyle){
           return window.getComputedStyle(element);
//           具有兼容问题
        } else {
           return element.currentStyle;
        }
    }
</script>
</body>

    设置内联样式

    style属性；通过页面元素的style属性实现
    setAttirbute（）方法；通过style属性设置，还可调用以elementsetAttribute()方法实现

    <body>
<div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
    var div = document.getElementById('q1');
    div.setAttribute('style','width: 400px;height: 400px;border: 1px solid black');
    var div = document.getElementById('q1');
    var style = div.style;
    style.width ='600px';
    style.height = '600px';
</script>
</body>

    Element对象的样式属性

    元素内部的宽度和高度

    以Element对象的clientWidth和clientheiht来设置内部的宽度和高度

    <style>
        #q1{
           width: 200px;
           height: 200px;
           border: 10px solid black;

           box-sizing: border-box;
        }
    </style>
</head>
<body>
<script>
    var div = document.getElementById('q1');
    console.log(div.clientWidth, div.clientHeight);
//    内容区 + 内边距；只能获取，不能设置
</script>
</body>

    内容区的宽度和高度

    以Element对象的scrollWidth和scrollheiht来设置内容区的宽度和高度

      <style>
        #fu{
           width: 200px;
           height: 200px;
           background-color: red;

           overflow: auto;
        }
        #zi{
           width: 400px;
           height: 400px;
           background-color: blue;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
</div>
<script>
    var fu = document.getElementById('fu');
    console.log(fu.scrollWidth, fu.scrollHeight);
</script>
</body>

    滚动条滚动的宽度和高度

    以Element对象的scrolleft属性来设置滚动条到元素的距离

        <style>
        #fu{
            width: 200px;
            height: 200px;
            background-color: red;

            overflow: auto;
        }
        #zi{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
</div>
<script>
    var fu = document.getElementById('fu');
    parent.onscroll = function () {
        console.log(fu.scrollLeft, fu.scrollTop);
    }
</script>
</body>

    判断元素内容是否滚动到底

    以Element对象的scrollTop属性来设置滚动条到元素顶部的距离

    <style>
        #fu{
            width: 200px;
            height: 200px;
            background-color: red;

            overflow: auto;
        }
        #zi{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio ex expedita fugiat harum iusto maxime minus mollitia nesciunt praesentium quae quas, qui quisquam sint sunt ullam vitae voluptate voluptatem?</div>
</div>
<script>
    var fu = document.getElementById('fu');
    fu.onscroll = function () {
        console.log(fu.clientHeight, fu.scrollHeight, fu.scrollTop);
    }
</script>
</body>

    获取指定元素的定位父元素
    以Element对象的scrollheight，scrolltop，和clientheight来判断是否滚到底

    <style>
        #fu{
           position: relative;
        }
        #zz{
           position: relative;
        }
        #q1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
    </div>
<script>
    var q1 = document.getElementById('q1');
    /*
        1.如果当前元素的所有祖先元素都没有开启定位的话 - <body>元素
        2.如果当前元素的所有祖先元素中，只能一个开启定位的话 - 开启定位的祖先元素
        3.如果当前元素的所有祖先元素中，具有多个开启定位的话 - 距离当前元素最近的那个祖先元素
     */
    console.log(q1.offsetParent);
</script>
</body>
    javascriptcss
    佐珥玎
    41 声望8 粉丝
    « 上一篇
    【JavaScript】DOM之Node对象
    下一篇 »
    【JavaScript】DOM之事件

    引用和评论

    推荐阅读
    头像
    【Ajax】之jQuery中的Ajax

    佐珥玎阅读 1.4k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.4k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新